<template>
  <div>
    <div class="security">
      <div class="bg title">安全信息</div>
      <div class="bg fl">
        <div class="flex">
          <div class="small-title">手机绑定</div>
          <div class="data">
            <div v-if="!userinfo.mobile" @click="$router.push('/user_bound_mobile')">
              未设置,<i style="color: #FF5543">有风险</i>
            </div>
            <div v-else>{{userinfo.mobile}}</div>
          </div>
        </div>
        <span></span>
      </div>
      <div class="bg fl">
        <div class="small-title">实名制</div>
        <div class="data">
          <div v-if="userinfo.idcard">{{userinfo.real_name}} {{userinfo.idcard}}</div>
          <div v-else @click="$router.push('/user_idcard_add')">未实名</div>
        </div>
      </div>
      <div class="bg fl">
        <div class="flex" @click="$router.push('/user_modify_pwd')">
          <div class="small-title">修改登陆密码</div>
          <div class="data"></div>
        </div>
        <span></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    userinfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
}
</script>

<style scoped>
i {
  font-style: normal;
}
.security {
  margin-top: .133333rem;
}
.bg {
  box-sizing: border-box;
  padding: 0 .466667rem;
  display: flex;
  align-items: center;
  width: 10rem;
  height: 1.333333rem;
  background: #ffffff;
  border: .013333rem solid #F4F4F4;
}

.bg span {
  width: .32rem;
  height: .32rem;
  background: url('../../../../assets/img/my/bt_right.png') no-repeat;
  background-size: 100%;
}

.title {
  font-size: .426667rem;
  font-weight: 800;
  color: #222222;
}

.small-title {
  font-size: .346667rem;
  font-weight: 700;
  color: #333333;
}

.data {
  font-size: .346667rem;
  font-weight: 400;
  color: #999999;
}

.fl {
  justify-content: space-between;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 8.666667rem;
}

.img {
  width: .88rem;
  height: .88rem;
  background: url('../../../../assets/img/my/bt_head_color.png') no-repeat;
  background-size: 100%;
}
</style>